<? if(!empty($receipe)): ?>
	<h1>Izmena recepta #<?= $receipe['Receipe']['id']?></h1>
<? else: ?>
	<h1>Novi recept</h1>
<? endif; ?>
<?= $this->Form->create('Receipe', array('url'=>'/admin_receipes/save', 'enctype'=>'multipart/form-data')) ?>
	<?= $this->Form->hidden('id', array('value'=>@$receipe['Receipe']['id'])) ?>
	
	<?= $this->Form->label('title', "Naziv:") ?>
	<?= $this->Form->text('title', array('value'=>@$receipe['Receipe']['title'], 'class'=>'large')) ?>
	
	<br>
	<?= $this->Form->label('image', "Slika:") ?>
	<?= $this->Form->hidden('image', array('value'=>@$receipe['Receipe']['image'])) ?>
	<?= $this->Form->file('file') ?><br>
	<?= $this->Html->image('recepti/'.@$receipe['Receipe']['image']); ?>
	
	<fieldset>
		<legend>Materijal (<a href="javascript:void(0)" onclick="MaterialAdd()">+ dodaj</a>)</legend>
		
		<ol id="material-list">
		<? if(!empty($receipe['ReceipeMaterial'])): ?>
			<? foreach($receipe['ReceipeMaterial'] as $k=>$material): ?>
			<li>
				<?= $this->Form->hidden('ReceipeMaterial.'.$k.'.id', array('value'=>$material['id'])) ?>
				<?= $this->Form->text('ReceipeMaterial.'.$k.'.amount', array('value'=>$material['amount'], 'placeholder'=>'Količina...')) ?>
				<?= $this->Form->text('ReceipeMaterial.'.$k.'.name', array('value'=>$material['name'], 'class'=>'large autocomplete', 'placeholder'=>'Materijal...')) ?>
				<?= $this->Form->hidden('ReceipeMaterial.'.$k.'.product_id', array('value'=>$material['product_id'], 'class'=>'product_id')) ?>
				<a href="javascript:void(0)" onclick="$(this).parent().remove();RebuildIndexes('#material-list');">obriši</a>
			</li>
			<? endforeach; ?>
		<? endif; ?>
		</ol>
		
	</fieldset>
	
	<fieldset>
		<legend>Priprema (<a href="javascript:void(0)" onclick="PrepareAdd()">+ dodaj</a>)</legend>
		
		<ol id="prepare-list">
		<? if(!empty($receipe['ReceipePrepare'])): ?>
			<? foreach($receipe['ReceipePrepare'] as $k=>$prepare): ?>
			<li>
				<?= $this->Form->hidden('ReceipePrepare.'.$k.'.id', array('value'=>$prepare['id'])) ?>
				<?= $this->Form->textarea('ReceipePrepare.'.$k.'.content', array('value'=>$prepare['content'])) ?>
				<a href="javascript:void(0)" onclick="$(this).parent().remove();RebuildIndexes('#prepare-list');">obriši</a>
			</li>
			<? endforeach; ?>
		<? endif; ?>
		</ol>
		
	</fieldset>

	<br clear="all">
	<?= $this->Form->submit('Sačuvaj', array('div'=>false)) ?>
	<?= $this->Form->submit('Poništi', array('onclick'=>"location.href='/admin_receipes'", 'type'=>'button', 'div'=>false)) ?>
<?= $this->Form->end(); ?>

<!-- templates -->
<div style="display:none">	
	<div id="material-template">
		<?= $this->Form->hidden('ReceipeMaterial.?.id') ?>
		<?= $this->Form->text('ReceipeMaterial.?.amount', array('placeholder'=>'Količina...')) ?>
		<?= $this->Form->text('ReceipeMaterial.?.name', array('class'=>'large autocomplete', 'placeholder'=>'Materijal...')) ?>
		<?= $this->Form->hidden('ReceipeMaterial.?.product_id', array('class'=>'product_id')) ?>
		<a href="javascript:void(0)" onclick="$(this).parent().remove();RebuildIndexes('#material-list');">obriši</a>
	</div>
	<div id="prepare-template">
		<?= $this->Form->hidden('ReceipePrepare.?.id') ?>
		<?= $this->Form->textarea('ReceipePrepare.?.content') ?>
		<a href="javascript:void(0)" onclick="$(this).parent().remove();RebuildIndexes('#prepare-list');">obriši</a>
	</div>
</div>

<script type="text/javascript">
$(function(){
	initAutocomplete($('.autocomplete'));
})


function getTemplate(expr) {
	return $('<li>').html($(expr).html());
}
function MaterialAdd() {
	tpl = getTemplate('#material-template');
	$('#material-list').append(tpl);
	initAutocomplete(tpl.find('.autocomplete'));
	RebuildIndexes('#material-list');
}
function PrepareAdd() {
	$('#prepare-list').append(getTemplate('#prepare-template'));
	RebuildIndexes('#prepare-list');
}
function RebuildIndexes(expr){
	$(expr + ' li').each(function(index){
		var inputs = $(this).find('input,textarea,select');
		if(inputs.length) {
			inputs.each(function(){
				$(this).attr('name', $(this).attr('name').replace(/\[[\d\?]+\]/, "["+index+"]"));
			});
		}
	});
}
function initAutocomplete(el) {
	el.keyup(function(){
		$(this).parent().find('.product_id').val('');
	})
	el.autocomplete({
		source:    '/admin_receipes/search_products',
		minLength: 2,
		select: function(e, ui) {
			id = ui.item.id;
			var el = $(e.target).parent().find('.product_id');
			el.val(id);
			console.log(el);
		}
	})
}
</script>
